.card_root_layout {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #F1F3F5;
}

.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

@media (dark-mode: true) {
    .card_root_layout {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: #202224;
    }
}

.div_basic_container {
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    border-radius: 14px;
    width: 316px;
    height: 150px;
    background-color: #F1F3F5;
}
.div_basic_container_big{
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    border-radius: 14px;
    height: 300px;
    width: 100%;
    background-color: #F1F3F5;
}

@media (dark-mode: true) {
    .div_basic_container .div_basic_container_big{
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;

        border-radius: 14px;
        width: 316px;
        height: 150px;
        background-color: #202224;
    }
}

@media (dark-mode: true) {
    .div_basic_container_big{
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;

        border-radius: 14px;
        width: 316px;
        height: 150px;
        background-color: #202224;
    }
}

.div_left_container {
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    margin-top: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    background-color: #F1F3F5;
}

@media (dark-mode: true) {
    .div_left_container {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        background-color: #202224;
    }
}

.div_item1_container {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    border-radius: 14px;
    width: 140px;
    height: 57px;
    background-color: #FFFFFF;
    margin-bottom: 10px;
}

@media (dark-mode: true) {
    .div_item1_container {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        border-radius: 14px;
        width: 140px;
        height: 57px;
        background-color: #34383C;
    }
}

.div_item2_container {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    border-radius: 14px;
    width: 140px;
    height: 57px;
    margin-top: 12px;
    background-color: #FFFFFF;
}

@media (dark-mode: true) {
    .div_item2_container {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        border-radius: 14px;
        width: 140px;
        height: 57px;
        margin-top: 12px;
        background-color: #34383C;
    }
}

.div_right_container {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    margin-start: 12px;
    margin-top: 12px;
    margin-bottom: 12px;
    background-color: #F1F3F5;
}

@media (dark-mode: true) {
    .div_right_container {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        margin-start: 12px;
        margin-top: 12px;
        margin-bottom: 12px;
        background-color: #202224;
    }
}

.button_icon {
    radius: 12px;
    icon-width: 24px;
    icon-height: 24px;
    margin-start: 12px;
    background-color: #FFFFFF;
}

@media (dark-mode: true) {
    .button_icon {
        radius: 12px;
        icon-width: 24px;
        icon-height: 24px;
        margin-start: 12px;
        background-color: #34383C;
    }
}

.item_title {
    width: 82px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    max-lines: 1;
    text-overflow: ellipsis;
    margin-start: 8px;
    opacity: 1;
    color: #000000;
}

@media (dark-mode: true) {
    .item_title {
        width: 82px;
        font-size: 14px;
        font-weight: bold;
        text-align: center;
        max-lines: 1;
        text-overflow: ellipsis;
        margin-start: 8px;
        opacity: 0.86;
        color: #FFFFFF;
    }
}

.recent_use_title{
    height: 40px;
    width: 100%;
    align-items: center;
    margin-bottom: 5px;
    margin-left: 10px;
}
.font_middle{
    font-size: 16px;
}
.font_big{
    font-size: 24px;
}
.data-region-small{
    height: 150px;
    width: 700px;
}
.data-region-big{
    height: 300px;
    width: 700px;
}
.data-background {
    object-fit: fill;
}
.data-bar-small {
    width: 700px;
    height: 150px;
}
.data-bar-big {
    width: 700px;
    height: 300px;
}
.card_desc{
    height: 57px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.gray_color{
    color: #ccc;
}